<template>
   <div class="app-container">
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="110px">
         <el-form-item label="检查名称:">
            <el-input v-model="queryParams.governCheckTaskName" placeholder="请输入检查名称" clearable
               @keyup.enter="handleQuery" />
         </el-form-item>
         <el-form-item label="检查日期:">
            <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
               start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
         </el-form-item>
         <!--
         <el-form-item label="检查类型:">
            <el-select v-model="queryParams.governCheckTaskTypeName" placeholder="请选择检查类型" clearable>
               <el-option v-for="value in taskTypeList" :key="value" :label="value" :value="value" />
            </el-select>
         </el-form-item>
		 -->
         <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
         </el-form-item>
      </el-form>

      <el-card class="card-box">
         <el-table v-loading="loading" :data="planList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="40" align="center" fixed="left" />
            <el-table-column label="序号" width="55" type="index" align="center" prop="planId" fixed="left" />
            <el-table-column label="检查名称" align="center" prop="governCheckTaskName" :show-overflow-tooltip="true"
               width="350" />
            <el-table-column label="涉及危险源" align="center" prop="governInvolveDanger" :show-overflow-tooltip="true"
               width="150" />
            <el-table-column label="检查类型" align="center" prop="governCheckTaskTypeName" width="100" />
            <el-table-column label="计划开始日期" align="center" prop="governTaskStartTime" width="120" />
            <el-table-column label="计划结束日期" align="center" prop="governTaskEndTime" width="120" />
            <el-table-column label="登记时间" align="center" prop="governTaskRegisterTime" width="160" />
            <el-table-column label="检查单位" align="center" prop="governCheckCompany" width="180" />
            <el-table-column label="检查人员" align="center" prop="governCheckUserNames" width="160" />
            <el-table-column label="检查进度" align="center">
               <template v-slot="scope">
                  {{ scope.row.completeCount + '/' + (scope.row.completeCount + scope.row.unCompleteCount) }}
               </template>
            </el-table-column>

            <el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width" fixed="right">
               <template #default="scope">
                  <el-button type="text" icon="view" @click="handleView(scope.row)"
                     v-hasPermi="['check:governCheck:query']">查看</el-button>

               </template>
            </el-table-column>
         </el-table>
         <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" />
      </el-card>

      <!-- 详情对话框 -->
      <el-dialog :title="title" v-model="detailOpen" width="55%" append-to-body>
         <el-form ref="planDetail" :model="formDetail" :rules="rules" label-width="150px" style="margin-right: 90px">
            <!-- <el-row>
               <el-col :span="12">
                  <el-form-item label="检查名称:">
                     <el-input v-model="formDetail.governCheckTaskName" placeholder="请输入检查名称" clearable
                        :disabled=true />
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="涉及危险源:">
                     <el-input v-model="formDetail.governInvolveDanger" placeholder="请输入涉及危险源" :disabled=true />
                  </el-form-item>
               </el-col>
            </el-row>
            <el-row>
               <el-col :span="12">
                  <el-form-item label="检查类型:">
                     <el-select v-model="formDetail.governCheckTaskTypeName" placeholder="请选择检查类型" clearable
                        :disabled=true style="width: 100%">
                        <el-option v-for="value in taskTypeList" :key="value" :label="value" :value="value" />
                     </el-select>
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="被检查单位:">
                     <el-input v-model="formDetail.governCheckCompany" placeholder="请输入被检查单位" clearable
                        :disabled=true />
                  </el-form-item>
               </el-col>
            </el-row>
            <el-row>
               <el-col :span="12">
                  <el-form-item label="开始时间:">
                     <el-date-picker v-model="formDetail.governTaskStartTime" type="date" placeholder="选择日期"
                        :disabled=true style="width: 100%" />
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="结束时间:">
                     <el-date-picker v-model="formDetail.governTaskEndTime" type="date" placeholder="选择日期"
                        :disabled=true style="width: 100%" />
                  </el-form-item>
               </el-col>
            </el-row> -->
			
			
			
			<el-row v-if="isGovernCheck">
				<el-col :span="12">
				   <el-form-item label="检查名称" prop="governCheckTaskName">
					  <el-input v-model="formDetail.governCheckTaskName" placeholder="请输入检查名称" clearable :disabled="true" />
				   </el-form-item>
				</el-col>
				<el-col :span="12">
				   <el-form-item label="检查类型" prop="governCheckTaskTypeName">
					  <el-select v-model="formDetail.governCheckTaskTypeName" placeholder="请选择检查类型" clearable :disabled=true style="width: 100%;">
						 <el-option v-for="value in taskTypeList" :key="value" :label="value" :value="value" />
					  </el-select></el-form-item>
				</el-col>
			 </el-row>
			 <el-row v-if="isGovernCheck">
				<el-col :span="12">
				   <el-form-item label="检查来源">
					  <el-input v-model="formDetail.governCheckSource" placeholder="请输入检查来源" :disabled="true" />
				   </el-form-item>
				</el-col>
				<el-col :span="12">
				   <el-form-item label="检查级别">
					  <el-input v-model="formDetail.governCheckLevel" placeholder="请输入检查级别" clearable :disabled="true" />
				   </el-form-item>
				</el-col>
			 </el-row>
 
				
			<el-row v-if="isSelfCheck">
			   <el-col :span="12">
				  <el-form-item label="检查名称" prop="governCheckTaskName">
					 <el-input v-model="formDetail.governCheckTaskName" placeholder="请输入检查名称" clearable/>
				  </el-form-item>
			   </el-col>
			   <el-col :span="12">
				  <el-form-item label="检查类型" prop="governCheckTaskTypeName">
					 <el-select v-model="formDetail.governCheckTaskTypeName" placeholder="请选择检查类型" :disabled="true" clearable style="width: 100%;">
						<el-option v-for="value in taskTypeList2" :key="value" :label="value" :value="value" />
					 </el-select>
				 </el-form-item>
			   </el-col>
			</el-row>
			
						
			<el-row v-if="isSelfCheck">
			   <el-col :span="12">
				  <el-form-item label="检查范围">
					 <el-input v-model="formDetail.checkRange" placeholder="请输入检查范围" />
				  </el-form-item>
			   </el-col>
			   <el-col :span="12">
				  <el-form-item label="检查级别">
					 <el-select v-model="formDetail.governCheckLevel" placeholder="请选择检查级别" :disabled="true" clearable style="width: 100%;">
						<el-option v-for="value in governCheckLevelList" :key="value" :label="value" :value="value" />
					 </el-select>
				  </el-form-item>
			   </el-col>
			</el-row>
			<el-row v-if="isSelfCheck">
			   <el-col :span="12">
				  <el-form-item label="组织检查单位">
					 <el-input v-model="formDetail.governCheckCompany" placeholder="请输入组织检查单位"/>
				  </el-form-item>
			   </el-col>
			   <el-col :span="12">
				  <el-form-item label="被检查单位">
					 <el-input v-model="formDetail.checkedCompany" placeholder="请输入被检查单位" clearable />
				  </el-form-item>
			   </el-col>
			</el-row>
			
			 <el-row>
				<el-col :span="12">
				   <el-form-item label="开始时间">
					  <el-date-picker v-model="formDetail.governTaskStartTime" type="date" placeholder="选择日期" :disabled="true" style="width: 100%;" />
				   </el-form-item>
				</el-col>
				<el-col :span="12">
				   <el-form-item label="结束时间">
					  <el-date-picker v-model="formDetail.governTaskEndTime" type="date" placeholder="选择日期" :disabled="true" style="width: 100%;" />
				   </el-form-item>
				</el-col>
			 </el-row>
			
			<el-row v-if="isSelfCheck">
			   <el-col :span="24">
				  <el-form-item label="检查种类">
					 <el-select v-model="formDetail.checkKind" placeholder="请选择检查种类" clearable :disabled="true" style="width: 100%;">
						<el-option v-for="value in checkKindList" :key="value" :label="value" :value="value" />
					 </el-select>
				  </el-form-item>
			   </el-col>
			</el-row>
						
            <el-row>
               <el-col>
                  <el-form-item label="检查人员:">
                     <el-input v-model="formDetail.governCheckUserNames" placeholder="请选择检查人员" clearable
                        :disabled=true />
                  </el-form-item>
               </el-col>
            </el-row>
         </el-form>
         <el-card class="card-box">
            <el-table v-loading="loading" :data="governCheckTaskPlanItemList" style="width: 100%"
               @selection-change="handleSelectionChange">
               <el-table-column type="expand">
                  <template #default="scope">
                     <el-form label-position="left" inline>
                        <el-row><el-form-item label="检查项目">
                              <span> {{ scope.row.governCheckName + scope.row.governCheckContent }}</span>
                           </el-form-item></el-row>
                        <el-row><el-form-item label="检查方式">
                              <span> {{ scope.row.governCheckWay }}</span></el-form-item></el-row>
                        <el-row><el-form-item label="检查依据">
                              <span> {{ scope.row.governCheckBasis }}</span></el-form-item></el-row>
                        <el-row><el-form-item label="适用场合">
                              <span> {{ scope.row.governApplicablePlace }}</span></el-form-item></el-row>
                        <el-row><el-form-item label="检查人员">
                              <span> {{ scope.row.governCheckUserName }}</span></el-form-item></el-row>
                        <el-row><el-form-item label="检查时间">
                              <span> {{ scope.row.governCheckTime }}</span></el-form-item></el-row>
                     </el-form>
                  </template>
               </el-table-column>
               <el-table-column label="序号" width="55" type="index" align="center" prop="taskId" />
               <el-table-column label="检查项目" align="center" width="250" :show-overflow-tooltip="true">
                  <template #default="scope">
                     {{ scope.row.governCheckName + scope.row.governCheckContent }}
                  </template>
               </el-table-column>
               <el-table-column label="检查方式" align="center" prop="governCheckWay" />
               <!-- <el-table-column label="检查依据" align="center" prop="governCheckBasis" width="200" />
               <el-table-column label="适用场合" align="center" prop="governApplicablePlace" width="250" />
               <el-table-column label="检查人员" align="center" prop="governCheckUserName" width="100"
                  :show-overflow-tooltip="true" />
               <el-table-column label="检查时间" align="center" prop="governCheckTime" width="100"
                  :show-overflow-tooltip="true" /> -->
			   <el-table-column label="检查结果" align="center" prop="governCheckResult" width="80" :show-overflow-tooltip="true" />
			   <el-table-column label="是否符合" align="center" fixed="right" :show-overflow-tooltip="true">
				   <template #default="scope">
				      {{ scope.row.governCheckConform === 0 ? '符合' : scope.row.governCheckConform === 1 ? '不符合' :
				         scope.row.governCheckConform === 2 ? '待定中' : ""
				      }}
				   </template>
			   </el-table-column>
            </el-table>
            <pagination v-show="total1 > 0" :total="total1" v-model:page="queryParams.pageNum1"
               v-model:limit="queryParams.pageSize1" @pagination="getTaskPlanItemList" />
         </el-card>
      </el-dialog>
   </div>
</template>

<script setup name="GovernCheck">
import { getCheckType } from "@/api/check/governCheckTaskInfo";
import { listGovernCheck, getGovernCheck, delGovernCheck, addGovernCheck, updateGovernCheck } from "@/api/check/governCheck";
// import { listGovernCheckTaskItem } from "@/api/check/governCheckTaskItem";
import { listGovernCheckTaskPlanItem } from "@/api/check/governCheckTaskPlanItem";

const { proxy } = getCurrentInstance();

const isGovernCheck = ref(false);
const isSelfCheck = ref(false);

const planList = ref([]);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const total1 = ref(0);
const title = ref("");
const dateRange = ref([]);
const taskTypeList = ref([]);
const governTaskPlanId = ref("");

const governCheckTaskPlanItemList = ref([]);

// 操作模态框
const detailOpen = ref(false);

const data = reactive({
   formDetail: {},
   queryParams: {
      pageNum: 1,
      pageSize: 10,
      pageNum1: 1,
      pageSize1: 10,
      governCheckTaskName: undefined,
      governCheckCompany: undefined,
   },
   rules: {}
});

const { queryParams, formDetail, rules } = toRefs(data);

/** 查询检验类型列表 */
function getCheckTypeList() {
   loading.value = true;
   getCheckType().then(response => {
      taskTypeList.value = response.data;
      loading.value = false;
   });
}

/** 多选框选中数据 */
function handleSelectionChange(selection) {
   ids.value = selection.map(item => item.governTaskPlanId);
   single.value = selection.length != 1;
   multiple.value = !selection.length;
}

/** 查询参数列表 */
function getList() {
   loading.value = true;
   queryParams.value.governPlanStatus = 1;
   listGovernCheck(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
      planList.value = response.rows;
      total.value = response.total;
      loading.value = false;
   });
}

/** 查看按钮操作 */
function handleView(row) {
   reset();
   const id = row.governTaskPlanId || ids.value;
   getGovernCheck(id).then(response => {
      formDetail.value = response.data;
	  let governCheckSource = formDetail.value.governCheckSource;
	  if (governCheckSource && governCheckSource == '企业自主检查') {
		isSelfCheck.value = true;
		isGovernCheck.value= false;
	  } else {
		isSelfCheck.value = false;
		isGovernCheck.value= true;
	  }
	  
	  
      detailOpen.value = true;
      title.value = "检查任务";
   });

   queryParams.value.pageNum1 = 1;
   governTaskPlanId.value = id;
   getTaskPlanItemList();
}

/** 查询参数列表 */
function getTaskPlanItemList() {
   loading.value = true;
   const params = {
      pageNum: queryParams.value.pageNum1,
      pageSize: queryParams.value.pageSize1,
      governTaskPlanId: governTaskPlanId.value,
   };
   listGovernCheckTaskPlanItem(params).then(response => {
      governCheckTaskPlanItemList.value = response.rows;
      total1.value = response.total;
      loading.value = false;
   });
}

/** 表单重置 */
function reset() {
   formDetail.value = {
   };
   proxy.resetForm("planDetail");
}
/** 搜索按钮操作 */
function handleQuery() {
   queryParams.value.pageNum = 1;
   getList();
}
/** 重置按钮操作 */
function resetQuery() {
   dateRange.value = [];
   proxy.resetForm("queryRef");
   handleQuery();
}

onMounted(() => {
   getList();
   getCheckTypeList();
});
</script>
